<template>
<div class="view v-job-detail" >
  <div class="view__body" ref="body" id="body">
    <div ref="bodyContent" v-if="d">
      <job-detail v-if="d" ref="jobDetail" :d="d"></job-detail>
    </div>
  </div>
  <!-- footer -->
  <div class="view__footer " v-if="d" :class="{'view__footer__nopass':d.check_status!=1}">
    <div class="view__footer-btn vice" @click="openApp">
      <div class="bordered border-theme" >打开App</div>
    </div>
    <div class="view__footer-btn major" @click="downLink">
      <div class="bordered border-theme" >下载App</div>
    </div>
  </div>
  <div class="v-job-detail-openPopup" @click="popupVisible=false" v-if="popupVisible">
      <img src="../imgs/job-detail/share-arrow.png" >
      <span>点击右上角，选择"浏览器中打开"</span>
  </div>
</div>

</template>

<script>
import Vue from 'vue';
import Res from '@/utils/res.js';
import Map from '@/utils/map.js';
import Geohash from 'latlon-geohash';

export default {
  name: 'Detail',
  data: function () {
    return {
      title: null,
      d: null,
      popupVisible: false,
    };
  },
  computed: {
    openAppLink () {
      if (this.$root.ua.isIos) {
        return 'https://slark.ztcjob.cn?type=job&id=' + this.$route.params.id
      } else {
        return "ztcjob://ztc.southflower.cn/activity/share/router?type=job&id=" + this.$route.params.id
      }
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    fetchData: function () {
      Map.getGeolocation().then( (pos)=>{
        Res.fetchSelectedDetail(this.$route.params.id)
        .then((d) => {
          this.onFetchedData(d, pos);
        })
        .catch(function () {
          alert('网络不给力 请稍候再试')
        })
      })
      
    },
    onFetchedData(d, pos) {
      this.d = d;
    },
    downLink () { 
      location.href = '//a.app.qq.com/o/simple.jsp?pkgname=cn.southflower.ztc';
    },
    openApp () {
      if (this.$root.ua.isWx) {
       this.popupVisible = true;
      } else {
        location.href = this.openAppLink;
      }
    }
  },
  components:{
    'job-detail':require("../comp/job-detail/index.vue").default
  }
}
</script>

<style lang="stylus">
@import "../vars"
.v-job-detail
  &-openPopup
    position fixed
    z-index 9999
    width 100%
    height 100%
    top 0
    left 0
    background-color rgba(0,0,0,.3)
    padding 40px 0 100px
    text-align center
    img
     width 130px
     height 130px
     position absolute
     right 20px
     top 0px
    span
      display inline-block
      margin-top 110px
      color #fff
      font-size 18px
  // footer
  .view__footer
    padding 6px 18px
    font-size 0
    border-top solid 1px #eee
    background #fff
    display flex
    .view__footer-btn
      display inline-block
      width 60%
      font-size 15px
      img
        width 17px
        height 14px
        margin-right 10px
        display inline-block
        position relative
        top 2px
      > div, > a
        line-height 38px
        height 40px 
        text-align center
        border-radius $round-corner
        border-style solid
        display block
      &.big
        width 100%
        > div, > a
          color #fff
          background $theme
      &.major
        flex 2 1
        > div
          color #fff
          background $theme
      &.vice
        flex 1 1
        padding-right 12px
        > div
          color $theme
  .view__footer__nopass
    .view__footer-btn
      &.major
        > div
          color #fff
          background #ccc
          border-color #ccc
</style>
